﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        ul {
            list-style: none;
        }

            ul li {
                margin-left: 20px;
                cursor: pointer;
                text-decoration: underline;
            }

        .c1 {
            background-color: blue;
        }

        .c2 {
            background-color: white;
        }
    </style>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
    <script src="../Resource/JS/angular.1.2.0.min.js"></script>
</head>
<body ng-app="tab">

    <div ng-controller="tab_c">

        <input type="button" id="btn1" value="abc" ng-click="btnshow()" />

        <div id="container1"></div>
    </div>
</body>
</html>
<script>
    var app = angular.module("tab", []);

    app.controller("tab_c", function ($scope, $rootScope) {
        $scope.tabs = [
            { name: "选项1", id: 1, className: 'c1', content: [{ name: 'aa', age: 1 }, { name: 'aa', age: 1 }] },
            { name: "选项2", id: 2, className: 'c2', content: [{ name: 'bb', age: 2 }, { name: 'bb', age: 2 }] },
            { name: "选项3", id: 3, className: 'c2', content: [{ name: 'cc', age: 3 }, { name: 'cc', age: 3 }] },
            { name: "选项4", id: 4, className: 'c2', content: [{ name: 'dd', age: 4 }, { name: 'dd', age: 4 }] }];

        $scope.tag = "1";

        $scope.change = function (obj) {
            for (var i = 0; i < $scope.tabs.length; i++) {
                if (obj.name == $scope.tabs[i].name) {
                    $scope.tabs[i].className = "c1";
                } else {
                    $scope.tabs[i].className = "c2";
                }
            }
            $scope.tag = obj.id;
        }

        $scope.btnshow = function () {
            alert(1);
            var html = "<div ng-controller='tab_c'>" +
                    "<ul ng-switch on='tag'>" +
           "<li ng-repeat='item in tabs' class='{{item.className}}' ng-click='change(item);'>{{item.name}}</li>" +
       "</ul>" +
      "<div ng-repeat='item in tabs' style='float: left;'>" +
           "<div ng-if='tag == item.id' ng-repeat='one in item.content'>" +
               "<span>{{one.name}} -----{{one.age}}</span>" +
           "</div>" +
       "</div>" +
   "</div>";

            $("#container1").append($(html));
            $scope.$apply();
        }


    })
</script>
